<template>
    <el-menu
        
        :default-active="activeIndex"
        class="mb-10 headerMenu"
        mode="horizontal"
        background-color="#F5F7F9"
        text-color="#fff"
        @select="handleSelect"
    >
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="my_create">我创建的</el-menu-item>
        <el-menu-item index="my_join">我加入的</el-menu-item>
        <el-menu-item index="my_course">我课程的</el-menu-item>
        <button class="createbtn" @click="centerDialogVisible = true">创建</button>
            <el-dialog v-model="centerDialogVisible" width="20%" center :show-close="false">
                <img src="@/assets/images/QQ图片20221109175518.png" style="width: 100%;" alt="">
            </el-dialog>
    </el-menu>
    
</template>
 
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
const activeIndex =ref('1')
const props=defineProps(['modelValue'])
const emit=defineEmits(['update:modelValue'])
const centerDialogVisible = ref(false)
const handleSelect = async (val: string) => {
    activeIndex.value = val;
    emit('update:modelValue',val)
}

</script>
 
<style lang="less" scoped>
 .headerMenu {
    border-bottom: none;
    padding: 26px 30px;
    position: relative;
    background-color: #fff;
    // 
    .createbtn{
        position: absolute;
        top: 30px;
        right: 30px;
        width: 84px;
        height: 32px;
        background-color: #f93684;
        border: none;
        border-radius: 20px;
        color: #fff;
        cursor: pointer;
    }
}

.el-menu--horizontal > .el-menu-item {
    height: 35px;
    font-size: 14px;
    padding: 9px 12px;
    margin: 0 24px 10px 0;
    border-radius: 8%;
    color: #7d8090;
}
.el-menu--horizontal > .el-menu-item.is-active {
    color: #fff !important;

    background-color: #f93684;
    border-bottom: none;
}
</style>